function Page(option) {//option表示参数  参数是一个对象
    this.ele = document.querySelector(option.el);//找到目标元素
    this.ele.className = "page";
    this.data = option.data;//表示所有的数据
    this.methods = option.methods;//所有的回调方法
    this.pageIndex = 1;//默认选中的是第一页
    // this.total = option.data.total;
    this.create();//创造
    this.bindData();//绑定数据
    //this.bindEvent();//绑定事件
}
// Page.prototype.bindEvent = function () {

//     let that = this;

//     this.nextBtn.onclick = function () {//下一页
//         that.pageIndex++;//页码加1
//         that.bindData();//重新生成一下

//     }
//     this.prevBtn.onclick = function () {//下一页
//         that.pageIndex--;//页码减1
//         that.bindData();//重新生成一下
//     }

// }

Page.prototype.bindData = function () {//绑定数据
    let that = this;
    this.allPage = Math.ceil(this.data.total / this.data.shownum); //101/10
    //11  
    //
    let start = 1;//开头

    let end = this.allPage > this.data.showpage ? this.data.showpage : this.allPage;

    //假如 总数是101 每页显示10条  总页码是11  11>5         显示1到5页
    //     总数是11  每页显示10条  总页码是2   2>5 不成立    显示1到2
    //开头和结尾
    //当pageIndex小于3      显示    1  2  3  4  5
    //当pangeIndex大于3     显示    2  3  4  5  6

    //当页码在中间的时候
    this.middleNum = Math.ceil(this.data.showpage / 2);//5/2  中间数据为3

    if (this.pageIndex > this.middleNum) {//大于中间数4>3

        start = this.pageIndex - this.middleNum + 1;// 4-3+1;
        end = this.pageIndex + this.middleNum - 1;//4+3-1
    }
    //末尾的判断  11 -3  到达末尾以后  固定好开头和结尾
    if (this.pageIndex > this.allPage - this.middleNum) {//>11-3  >8
        start = this.allPage - this.data.showpage + 1;//11 - 5 +1 ;
        end = this.allPage;//结尾
    }

    start = start > 1 ? start : 1;//处理开头


    this.content.innerHTML = "";

    for (let i = start; i <= end; i++) { //循环的去生成页码
        let item = document.createElement("div");
        if (this.pageIndex == i) {
            item.className = "item active";
        } else {
            item.className = "item";
        }

        item.innerHTML = i;

        item.onclick = function () {//点击以后 改变index  在重新生成
            that.pageIndex = i;
            that.bindData();
        },

            this.content.appendChild(item);
    }

    //做一个事件绑定的判断  最开始都不能点击
    this.prevBtn.disabled = true;
    this.nextBtn.disabled = true;
    this.prevBtn.onclick = null;
    this.nextBtn.onclick = null;


    if (this.pageIndex != 1) {//上一页可用
        this.prevBtn.disabled = false;

        this.prevBtn.onclick = function () {
            that.pageIndex--;
            that.bindData();
        }

    }

    if (this.pageIndex != this.allPage) {//下一页可用
        this.nextBtn.disabled = false;
        this.nextBtn.onclick = function () {
            that.pageIndex++;
            that.bindData();
        }

    }
    if (this.methods.cb) {
        this.methods.cb(this.pageIndex);
    }



}


Page.prototype.create = function () {// 生成结构

    this.prevBtn = document.createElement("button");
    this.prevBtn.innerHTML = "上一页";
    this.ele.appendChild(this.prevBtn);

    this.content = document.createElement("div");
    this.content.className = "content";
    this.ele.appendChild(this.content);


    this.nextBtn = document.createElement("button");
    this.nextBtn.innerHTML = "下一页";
    this.ele.appendChild(this.nextBtn);


}

